<template>
  <div class="page">
    <div class="head headA">
      <img class="logo" src="../assets/logo.png">
      <!--<img style="width: 70vw" src="../assets/tomato.png">-->
      <img style="width: 85vw" :src="$base.imgPath+productData.materialImgUrl">
    </div>
    <div class="foot footA">
      <flexbox>
        <flexbox-item>
          <div class="foot-nav" @click="go('product')"><img src="../assets/home/11.png"/><label>产品信息</label></div>
        </flexbox-item>
        <flexbox-item>
          <div class="foot-nav" @click="go('selectPerson')"><img src="../assets/home/22.png"/><label>透明供应</label></div>
        </flexbox-item>
        <flexbox-item>
          <div class="foot-nav" @click="go('interaction')"><img src="../assets/home/33.png"/><label>购买交流</label></div>
        </flexbox-item>
      </flexbox>
    </div>
    <div class="bottom">
      <p>北京桃娃农业科技有限公司</p>
      <p>010-57228333</p>
    </div>

  </div>
</template>

<script>
  import { Scroller, Rater, XButton, Flexbox, FlexboxItem, XProgress } from 'vux'

  export default {
    data () {
      return {
        loadNum: 0,
        productData:this.$utils.getData("productData").useDefPara,//产品数据
      }
    },
    components: {
      Scroller,
      Rater,
      XButton,
      Flexbox,
      FlexboxItem,
      XProgress
    },
    created:function () {
      var that = this;

    },
    methods: {
      go (path) {
        this.$router.push({path: path})
      }
    }
  }
</script>
<style lang="less" scoped>
  .head {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: -100vh;
    margin-bottom: 10vh;
  }
  .logo{
    position: fixed;
    top: 20px;
    left: 30px;
    width: 80px;
  }
  .loading{
    position: fixed;
    top: 40vh;
    padding: 0 30vw;
    color: #70aa2f;
    width: 40vw;
    text-align: center;
  }

  .foot {
    background: url("../assets/home/zhongzhi.png");
    background-size: 100% 100%;
    margin: 0 15px;
    padding: 10px 10px 35px 10px;
    opacity: 0;
  }

  .foot-nav {
    text-align: center;
  }

  .foot-nav img {
    width: 90%;
  }

  .foot-nav label {
    color: #70aa2f;
  }

  .headA{
    animation: a1 4s;
    margin-top: 15vh;
  }
  .footA{
    animation: a2 4s;
    opacity: 1;
  }
  .footA .foot-nav{
    animation: a3 4s;
    opacity: 1;
  }
  .bottom {
    text-align: center;
    font-size: 1.2rem;
    color: #999;
    position: fixed;
    bottom: 0;
    width: 100%
  }
  @keyframes a1 {
    0% {
      margin-top: -100px
    }
    40% {
      margin-top: 15vh;
    }
  }
  @keyframes a2 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
  }
  @keyframes a3 {
    0% {
      opacity: 0;
    }
    60% {
      opacity: 0;
    }
  }
</style>
